<template>
  <div>
    <p class="pinformation">搜索条件</p>
    <el-form label-width="85" ref="queryRef" :model="queryParams">
      <el-row>
        <el-col :span="4">
          <el-form-item label="检测类别：" prop="jclbId">
            <el-select
              style="width: 100%"
              clearable
              filterable
              v-model="queryParams.jclbId"
              placeholder="选择检测类别"
            >
              <el-option
                v-for="item in proxy.addListNoLimit(
                  jclbList,
                  'jclbId',
                  'jclbName'
                )"
                :key="item.jclbId"
                :value="item.jclbId"
                :label="item.jclbName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="点位名称：" prop="pointName">
            <el-input
              maxlength="100"
              clearable
              placeholder="请输入检测项目"
              v-model="queryParams.pointName"
              @keyup.enter="getList(1)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="点位编号：" prop="pointCode">
            <el-input
              maxlength="100"
              clearable
              placeholder="请输入点位编号"
              v-model="queryParams.pointCode"
              @keyup.enter="getList(1)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="检测项目：" prop="jcxmName">
            <el-input
              maxlength="100"
              clearable
              placeholder="请输入检测项目"
              v-model="queryParams.jcxmName"
              @keyup.enter="getList(1)"
            />
          </el-form-item>
        </el-col>

        <el-col :span="7">
          <el-form-item label="方法编号/名称：" label-width="110" prop="method">
            <el-input
              maxlength="100"
              clearable
              placeholder="方法编号/名称"
              v-model="queryParams.method"
              @keyup.enter="getList(1)"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="是否分包：" prop="isPackage">
            <el-select
              style="width: 100%"
              clearable
              filterable
              v-model="queryParams.isPackage"
              placeholder="选择是否分包"
            >
              <el-option
                v-for="item in isList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="分包公司：" prop="packageName">
            <el-input
              maxlength="100"
              clearable
              placeholder="请输入分包公司"
              v-model="queryParams.packageName"
              @keyup.enter="getList(1)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="指定方法：" prop="isMethod">
            <el-select
              style="width: 100%"
              clearable
              filterable
              v-model="queryParams.isMethod"
              placeholder="选择指定方法"
            >
              <el-option
                v-for="item in isList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="检测项目组：" prop="groupName">
            <el-input
              maxlength="100"
              clearable
              placeholder="请输入检测项目组"
              v-model="queryParams.groupName"
              @keyup.enter="getList(1)"
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="求和：" label-width="110" prop="isSum">
            <el-select
              style="width: 100%"
              clearable
              filterable
              v-model="queryParams.isSum"
              placeholder="选择是否求和"
            >
              <el-option
                v-for="item in isList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-row justify="center">
            <el-button type="success" @click="getList(1)">搜索</el-button>
            <el-button class="business resetBtn" @click="resetQuery"
              >重置</el-button
            >
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <p class="pinformation" style="margin-top: 8px">检测项目列表</p>
      <p class="totalStyle" style="margin-top: 6px">共 {{ total }} 条数据</p>
      <el-form-item label="检测类别数：" style="margin-left: 20px">
        {{ countForm.jclbCount }}
      </el-form-item>
      <el-form-item label="点位数：" style="margin-left: 20px">
        {{ countForm.pointCount }}
      </el-form-item>
      <el-form-item label="检测项目数：" style="margin-left: 20px">
        {{ countForm.jcxmCount }}
      </el-form-item>
    </el-row>
    <el-table
      ref="mainTableRef"
      class="business"
      v-loading="loading"
      :data="jcxmTable"
      height="50vh"
    >
      <el-table-column
        label="点位名称"
        align="center"
        prop="pointName"
        width="100"
      />
      <el-table-column label="点位编号" align="center" prop="pointCode" />
      <el-table-column label="检测类别" align="center">
        <template #default="scope">
          {{
            proxy.getItemByArray(
              jclbList,
              "jclbId",
              scope.row.jclbId,
              "jclbName"
            )
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="检测项目"
        align="center"
        prop="jcxmName"
        width="120"
      >
      <template #default="scope">
            <span v-html="proxy.getSupAndSub(scope.row.jcxmName)"></span>
          </template>
        </el-table-column>
      <el-table-column
        label="方法编号"
        align="center"
        prop="methodCode"
        width="130"
      />
      <el-table-column
        label="方法名称"
        align="center"
        prop="methodName"
        width="400"
      />
      <el-table-column label="连测天数" align="center" prop="sampleDay" />
      <el-table-column label="每天频次" align="center" prop="sampleCount" />
      <el-table-column label="特别选项" align="center" prop="" />
      <el-table-column
        label="检测项目组"
        align="center"
        prop="groupName"
        width="110"
      />
      <el-table-column label="是否求和" align="center" prop="isSum">
        <template #default="scope">
          {{ scope.row.isSum ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column
        label="是否指定方法"
        align="center"
        prop="isMethod"
        width="110"
      >
        <template #default="scope">
          {{ scope.row.isMethod ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column label="是否分包" align="center" prop="isPackage">
        <template #default="scope">
          {{ scope.row.isPackage ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column label="分包公司" align="center" prop="packageName" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="Review">
import { getBusinessList, getBusinessCount } from "@/api/contract/review";
import { allListJclb } from "@/api/store/jclb";
const { proxy } = getCurrentInstance();
const total = ref(0);
const jcxmTable = ref([]);
const jclbList = ref([]);
const loading = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  isPackage: -1,
  isSum: -1,
  isMethod: -1,
  jclbId: -1
});
const props = defineProps({
  echo: {
    type: String,
  },
});
const isList = ref([
{name: '不限', id: -1}, {name: '是', id: 1}, {name: '否', id: 0}
])
const countForm = ref({})
function getList(isGetCount) {
  nextTick(() => {
    loading.value = true;
    queryParams.value.primaryId = props.echo;
    getBusinessList(queryParams.value).then((res) => {
      total.value = res.total;
      jcxmTable.value = res.rows;
      loading.value = false;
    });
    if (isGetCount) {
      let temp = JSON.parse(JSON.stringify(queryParams.value))
      delete temp.pageNum
      delete temp.pageSize
      getBusinessCount(temp).then(res => {
        countForm.value = res.data
      })
    }
  })
}

function resetQuery() {
  queryParams.value.pageNum = 1;
  proxy.resetForm("queryRef");
  getList(1);
}

allListJclb().then((res) => {
  jclbList.value = res.data;
});

defineExpose({
  getList,
});
</script>

<style></style>
